.notification
  position fixed
  width 40%
  height 100%
  background-color offWhite
  z-index 26
  display flex
  flex-direction column
  max-width 600px
  overflow hidden
  transition 0.5s
  & .iconbutton
    font-size metadataFontSize
  &__filterInput
    &.filterBar
      margin-top 0
      margin-bottom 0
      width 100%
    .textInputComponent__text
      width 100%
  &__list
    flex-grow 2
    overflow auto
    &__item
      flex-direction row
      display flex
      color fontColor
      font-weight normal
      background-color lightBlueOpacity
      padding standardSpacing
      // NOTE - MP - 2022-05-20 - If we change the height, we need to change the
      // height of NotificationWall component.
      height 60px
      align-items center
      &__text
        flex 4
        display flex
        word-break break-word
        align-items center
        &__content
          line-height standardFontSize + 1
          max-height 2*standardFontSize + 1
          overflow hidden
          text-overflow ellipsis
        & .avatar
          margin-inline-end standardSpacing
        &__avatars
          width oneAuthorAvatarSize
          height oneAuthorAvatarSize
          margin-inline-end standardSpacing
          &__second
            position absolute
            top 20px
        &__usersAvatar
          min-width oneAuthorAvatarSize
          min-height oneAuthorAvatarSize
          display flex
          border-radius 50%
          margin-inline-end standardSpacing
          align-items center
          justify-content center
          background-color darkGrey2
      &__meta
        padding-inline-end textSpacing
        color darkGrey2
        flex 1
        overflow hidden
        font-size metadataFontSize
        white-space nowrap
        text-align end
        &__space
          text-overflow ellipsis
          overflow hidden
          font-weight bold
          unicode-bidi plaintext
      &__circle
        font-size wallCircleSize
        transition 300ms font-size color
        color lightBlue
        margin -20px -10px
        padding 20px 10px
        &:hover
            filter brightness(0.7)
        &__wrapper
          margin 0
          min-width 1em
          text-align center
      &.itemRead
        color darkGrey2
        background-color offWhite
        opacity 0.8
      &.isMention:not(.itemRead)
        background lightOrange
      &.isMention.itemRead
        background lightOrangeOpacity
      &.isToDo:not(.itemRead)
        background greenToDo
      &.isToDo.itemRead
        background greenToDoOpacity
      &:hover
        color inherit
  &__wallClose
    height 0
    top 0
  &__header
    min-height headerHeight
    &__title
      font-weight normal

.contentTitle
  &__highlight
    font-weight bold

// INFO - MB - 20210204 - overrides ListItemWrapper styles because .contentItem is used in many places
.notification > .notification__list > .contentItem
  border none

[dir=ltr] .notification
  right 0
  box-shadow shadow-right
  &__list__item__text__avatars__second
    left twoAuthorsAvatarSize

[dir=rtl] .notification
  left 0
  box-shadow shadow-left
  &__list__item__text__avatars__second
    right twoAuthorsAvatarSize

@media (min-width: min-md) and (max-width: max-md)
  .notification
    width 50%

@media (max-width: max-sm)
  .notification
    width 100%

@media (max-width: max-lg)
  .notification .btn
    & > .genericButton__label
      display none
    & > .genericButton__icon
      margin 0px
